<template>
    <div>
        <!--卡片-->
        <el-card class="box-card">
            <!--定义面包屑-->
            <el-breadcrumb separator=">">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>租赁管理</el-breadcrumb-item>
                <el-breadcrumb-item>代理门店</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>
            <!--表单的搜索框
                 :model="双向绑定表单的数据"
            -->
            <el-form :inline="true" :model="roleFormData"  class="demo-form-inline">
                <el-form-item >
                    <el-input v-model="roleFormData.shopName" placeholder="请输入门店名"></el-input>
                </el-form-item>
                <el-form-item >
                <el-input v-model="roleFormData.address" placeholder="请输门店地址"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary"  @click="initTable">查询</el-button>
                    <el-button type="primary" @click="add">添加</el-button>
                </el-form-item>
            </el-form>

            <!--数据表格-->
            <!--<el-button type="primary" @click="add">添加</el-button>-->
            <template>
                <el-table
                        :data="tableData"
                        :border="true"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="#"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="shopName"
                            label="门店名"
                            >
                    </el-table-column>
                    <el-table-column
                            prop="provinceId"
                            label="省id"
                            v-if="show">
                    </el-table-column>
                    <el-table-column
                            prop="cityId"
                            label="城市id"
                            v-if="show">
                    </el-table-column>
                    <el-table-column
                            prop="areaId"
                            label="区id"
                            v-if="show">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="门店地址">
                    </el-table-column>
                    <el-table-column
                            prop="shopAddtime"
                            label="门店添加时间">
                    </el-table-column>
                    <el-table-column
                            prop="ishot"
                            label="是否是常用门店">
                        <template slot-scope="scope">
                            <p v-if="tableData[scope.$index].ishot==1">是</p>
                            <p v-if="tableData[scope.$index].ishot==0">不是</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="120px" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" @click="upda(scope.row)" circle></el-button>
                            <el-button type="danger" icon="el-icon-delete" @click="del(scope.row.id)" circle></el-button>
                        </template>
                    </el-table-column >
                </el-table>
                <!--分页-->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </template>
            <!--分配菜单的弹出框-->
            <el-dialog title="汽车信息" :visible.sync="dialogFormVisible" width="33%" style="text-align: center">
                <el-form :model="form" ref="form">
                    <el-form-item label="Id" v-show="false">
                        <el-input v-model="form.id" autocomplete="off" style="width: 75%"></el-input>
                    </el-form-item>
                    <el-form-item label="门店名">
                        <el-input v-model="form.shopName" autocomplete="off" style="width: 75%"></el-input>
                    </el-form-item>
                    <el-form-item label="所在城市">
                        <el-cascader
                                style="width: 75%"
                                size="large"
                                :options="options"
                                v-model="selectedOptions"
                                @change="handleChange">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="门店地址">
                        <el-input v-model="form.address" autocomplete="off" style="width: 75%"></el-input>
                    </el-form-item>
                    <el-form-item label="是否是常用门店">
                        <el-select v-model="form.ishot" autocomplete="off" placeholder="请选择活动区域" style="width: 75%">
                            <el-option label="是"    :value="1"></el-option>
                            <el-option label="不是"   :value="0"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addOrupda">确 定</el-button>
                </div>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
    import { regionData } from 'element-china-area-data'
    export default {
        name: "CarConfig",
        data(){
            return {
                roleFormData:{},
                tableData:[],
                currentPage:1,
                pageSize:5,
                total:0,
                form:{

                },
                dialogFormVisible:false,
                labelPosition:'left',
                show:false,
                options: regionData,
                selectedOptions: []
            }
        },
        created() {
            // this.getCartype();
            this.initTable();
        },
        methods:{
            initTable(){
                //get方式不支持json数据
                var that=this;
                this.$http.post(`/lease/shop/getAllShopPage/${this.currentPage}/${this.pageSize}`,this.roleFormData).then(function(resp){
                    that.tableData=resp.data.result.records;
                    that.total=resp.data.result.total;
                });
            },
            del(id){
                var that=this;
                var param={id:id};
                this.$http.delete("/lease/shop/delById",{params:param}).then(function (r) {
                        that.$message(r.data.message);
                        that.initTable();
                    }
                )
            },
            handleChange (value) {
                console.log(value)
                console.log(this.selectedOptions)
            }
            ,
            // getCartype(){
            //     var that=this;
            //     this.$http.get("lease/type/getAllType").then(r=>{
            //         that.tableData=r.data.result.type;
            //     })
            // },
            // getCarConfig(){
            //     var that=this;
            //     this.$http.get("lease/config/getAllConfig").then(r=>{
            //         that.optionsConfig=r.data.result.carConfigs;
            //         console.log(r.data.result.carConfigs)
            //     })
            // },
            // getCarBrand(){
            //     var that=this;
            //     this.$http.get("lease/brand/getCarBrand").then(r=>{
            //         that.optionsbrand=r.data.result.CarBrand;
            //     })
            // },
            // getShop(){
            //     var that=this
            //     this.$http.get("lease/shop/getAllShop").then(r=>{
            //         that.optionsShop=r.data.result.shop;
            //     })
            // }
            // ,
            add(){
                this.dialogFormVisible = true;
                this.form={};
                this.selectedOptions=[]
            },
            upda: function (data) {
                this.dialogFormVisible = true;
                this.$nextTick(() => {
                    this.$refs.form.resetFields();
                });
                var js= JSON.stringify(data);
                var da= JSON.parse(js);
                this.form = da;
                this.selectedOptions = [data.provinceId, data.cityId, data.areaId];
            },
            addOrupda(){
                this.form.provinceId=this.selectedOptions[0];
                this.form.cityId=this.selectedOptions[1];
                this.form.areaId=this.selectedOptions[2];
                this.dialogFormVisible = false;
                var that=this;
                if (that.form.id){
                    this.$http.put("lease/shop/updateShop",this.form).then(r=>{
                        that.$message(r.data.message);
                        that.initTable();
                    })
                } else if (!that.form.id){
                    this.$http.post("lease/shop/addShop",this.form).then(r=>{
                        that.$message(r.data.message);
                        that.initTable();
                    })
                }

            }

            ,
            handleSizeChange(v){
                this.pageSize=v;
                this.initTable();
            },
            handleCurrentChange(v){
                this.currentPage=v;
                this.initTable();
            }
        }
    }
</script>

<style scoped>

</style>

